<template>
  <div>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="id"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column label="商品的图片"
                       width="120">
        <template slot-scope="scoped">
          <el-avatar shape="square"
                     :size="70"
                     :src="scoped.row.imgUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="商品名称"
                       width="120">
      </el-table-column>
      <el-table-column prop="marketPrice"
                       label="市场价格"
                       width="80">
      </el-table-column>
      <el-table-column prop="price"
                       label="销售价格"
                       width="80">
      </el-table-column>
      <el-table-column prop="num"
                       label="数量"
                       width="50">
      </el-table-column>
      <el-table-column label="状态"
                       align="center"
                       width="100">
        <template slot-scope="scoped">
          <el-tag size="small"
                  v-if="scoped.row.status == 'active'"> {{scoped.row.status | formatterStatus}}</el-tag>
          <el-tag size="small"
                  type="danger"
                  v-if="scoped.row.status == 'unactive'"> {{scoped.row.status | formatterStatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品状态"
                       align="center"
                       width="120">
        <template slot-scope="scoped">
          <el-switch v-model="scoped.row.delivery"
                     @change="updateStatus(scoped.row.id,scoped.row.delivery)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createDate"
                       :formatter="ftCreateDate"
                       label="创建时间"
                       width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scoped">
          <el-button type="primary"
                     size="mini"
                     @click="openDialog('update',scoped.row.id)">修改</el-button>
          <el-button type="success"
                     size="mini"
                     @click="openPull(scoped.row.id)">入库</el-button>
          <el-button type="danger"
                     size="mini"
                     @click="del(scoped.row.id)">删除</el-button>
          <el-button type="info"
                     size="mini"
                     @click="toInfo(scoped.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { utctobeijing } from '@/utils/formatterDate.js'
export default {
  props: ["tableData"],
  created () {
  },
  filters: {
    formatterStatus (params) {
      if (params === 'active') {
        return '上架';
      } else if (params === 'unactive') {
        return '下架';
      } else {
        return '数据有问题';
      }
    }
  },
  methods: {
    ftCreateDate (row, column, cellValue, index) {
      return utctobeijing(cellValue);
    },
    openDialog (type, id) {
      this.$parent.$refs.dialogFrom.open(type, id);
    },
    updateStatus (id, delivery) {
      this.axios.post('/goods/updateStatusById', { id: id, delivery: delivery }, { isTip: true }).then(res => {
        if (res.data.code == '2000') {
          this.$emit('refresh');
        }
      })
    },
    del (id) {
      this.axios.post('/goods/delById', { id: id }, { isTip: true }).then(res => {
        if (res.data.code == '2000') {
          this.$emit('refresh');
        }
      })
    },
    toInfo (id) {
      this.$emit('openDialogInfo', id);
    },
    openPull (id) {
      this.$emit('openDialogPull', id);
    }
  }
}
</script>

<style lang="less" scoped>
</style>